
			$(function(){
				 
				$('.list-li').each(function(item){
					$(this).attr('index', item);
				})
    


////ajax数据处理事件
///ajax全局变量
				let musicDate1 = [];   ///总数据数组
				let musicRotateUrl = '';  ///旋转图片	
				let musiclyrics = '';  ///歌词
				let musicId = '';  ///id
				let timer = null;
				let that = null;
                let lyricBtn= false;
                let lyricTimer = null;
				let Itimer = null;
				let lyricST = 0;
				let playWay = 1;//三种播放方式  Loop循环播放  listPlay列表播放  random随机播放
		        let commentArea = document.querySelector('#comment-area');
				let order = 6;
				var  regex = /\d+@qq.com/;
				
				function ajax(){
					$.ajax({
						url:'/database',
						method:'GET',
						data:{'user':'admin','password':'clearlove'},
						success:function(data){
							musicDate1 = data;

						},
						error:function(err){
	
						}
					})
					$('.list-li').each(function(index){
						$(this).attr('index', index);
					})
				}
				ajax();

//调节音乐列表的scorll
				let musicListHeight = parseFloat($('.pages').css('height')) - parseFloat($('#main-title').css('height'))- 40 + 'px';
				$('#music-list').css('height',musicListHeight);
				
				let levelHeight = 	parseFloat(musicListHeight/2);
//控制样式
				$('.singer').eq(0).css('font-size','36px');
				const player = document.getElementById('player');
				let footerWidth = parseFloat($('#content').css('height')) - parseFloat($('#header').css('height')) - parseFloat($('#main').css('height')) + 'px';
				
				$('#footer').css('height',footerWidth);
				
			   let blurHheight = parseFloat($('body').css('height')) -parseFloat($('#footer').css('height')) -20;
		
			   $('.blur').css('height', blurHheight + 'px'); 
		
	
/////制作音乐启动开关
				let musicBtn = false;
				$('.audio-control').eq(1).click(()=>{
					musicPlay(); 
					 $('#lyrics').scrollTop(lyricST);
				});
				$('.audio-control').eq(2).click(()=>{
					songsEnd(1);
				});
				$('.audio-control').eq(0).click(()=>{
					songsEnd(-1);
				});

				let listLiObj = $('.list-li').eq(0);
//换歌
					$('.list-li').click(function(e){
//当没有换歌的时候 直接返回
         
					  if(that == $(this).attr('index')) return ;
					  
					  that = parseInt($(this).attr('index'));

//打开歌词流动开关
					 lyricBtn = false;
///启动函数引擎
				    musicPlay(musicDate1[that]);
					})

	
 ///音乐启动引擎
					function musicPlay(ad){
//开
						if(ad){

//头设置
								///bgr变化
								listLiObj.css('background','none');
								$('.list-li').eq(that).css('background','gray');
								listLiObj =$('.list-li').eq(that);
								///music播放页面图片更换
								musicRotateUrl = musicDate1[that].alImg;
								musicId = musicDate1[that].id;
								////歌曲url改变
					           $('#player').attr('src',musicDate1[that].url);
					

///跟换曲子的开                  
                        		$('#lyrics').scrollTop(0);
	     						player.currentTime  = 0;				        
								musicBtn = true;
								stop();
							
								player.load();
												
								//关到开==》
								///播放效果
								$('.addTrans').css('transition','none');
								$('#play-point').css('left', '0px');
								$('#play-white').css('width','0px')
						


								$('#bgr-packge').css('animation',' rotate 15000ms linear infinite');
								///定时关闭动画
								clearTimeout(timer)	
							
								
			
						    	 timer = setTimeout(()=>{
										songsEnd();
									}, ad.dt)
									
					
/////////改变图片url           
								$('#bgr-packge-img').attr('src', musicRotateUrl);
					    		$('.blur').css('filter', 'blur(120px) brightness(20%)')
					
									setTimeout(()=>{
										document.querySelector('#xx').style.background = `url(${musicRotateUrl})`;
										$('.blur').css('filter', 'blur(120px) brightness(70%)')
									},1000)
///ajax获取歌词
									$.ajax({
										url:'/lyrics',
										method:'GET',
										data:{'user':'admin', 'password':'clearlove', 'id':musicId},
										success:function(data){
									
//关于歌词变化
				                         data.unshift({
											time: "00:00.00",
											 lyric: " "
										 })
										 lyricST = 0;
										 lyricChang(data);
										 lightLyric(data);
										 setTimeout(() =>{	 
										 player.play();
									
										 $('#play-point').css('left', '600px');
										 $('#play-white').css('width','600px')
		 //设定歌曲时间
						 
										 $('.addTrans').css('transition',` all ${ad.dt}ms linear`);
										 }, 500);
										},
										err:function(err){
									
										}
									})
							
						
	
							}

					else	if(!musicBtn){
					if($('#player').attr('src')){
///同一曲子的开	                 
                        
								stop();
						    	musicBtn = !musicBtn;
								player.play();	
///播放效果    
						$('#lyrics').scrollTop(lyricST)
						$('#bgr-packge').css('animation',' rotate 15000ms linear infinite');
						  ///关闭动画
						  clearTimeout(timer)
						   let timeStop = musicDate1[that].dt - (player.currentTime)*1000; ///剩余时间的计算
						  
						   timer = setTimeout(()=>{
						    	songsEnd();
                        
						   },timeStop)
				
	
						$('#play-point').addClass('addTrans').css('left','600px');
						$('#play-white').addClass('addTrans').css('width','600px');

						$('.addTrans').css('transition',` all ${timeStop}ms linear`);
				
						}
						else{
							alert('请先选择曲目');
						}
						}
						//关
						else{
							if($('#player').attr('src')){
								start();
								musicBtn = !musicBtn;
								player.pause();
				
						///播放效果
						let bgrPackgeTransform = $('#bgr-packge').css('transform');
						let playPointLeft = $('#play-point').css('left');
						let playWhiteWidth = $('#play-white').css('width');
					
						$('#bgr-packge').css('animation','');
						$('#play-point').removeClass('addTrans').css('left', playPointLeft);
						$('#play-white').removeClass('addTrans').css('width',playWhiteWidth);
					
					}
					}
				}
						////page.js
						///header 滑动条点击滑动
						let objCenter = $('.pages').eq(1);
						let liPos = ['15%','36%','57%','78%'];
						$('#bar').css('left',liPos[1]);
						
						$('.pages').addClass('pages-original');
						objCenter.addClass('pages-trans');

						$('.pages').each(function(index){
							$(this).attr('index', index);
						})

						$('.header-li').each(function(index){
							$(this).attr('index', index);
						})
						
						$('.header-li').click(function(){

							$('	#search-text').css('display', 'none');
							$('#search-logo').css('display', 'none');
					
							$('#bar').css('left',liPos[$(this).attr('index')]);
							
								objCenter.removeClass('pages-trans');
							$('.pages').eq($(this).attr('index')).addClass('pages-trans');
							objCenter =  $('.pages').eq($(this).attr('index'));
                                
						if($(this).attr('index') == 1){
                            search();
							$('#search-logo').css('display', 'block'); 
							searchBtn = true;
							$('.blur').css('filter', 'blur(120px) brightness(70%)')
						}
						else if($(this).attr('index') == 2){
							$('.blur').css('filter', 'blur(120px) brightness(50%)')
						}
						else if($(this).attr('index') == 3){
							$('.blur').css('filter', 'blur(120px) brightness(50%)')
						}
						else if($(this).attr('index') == 0){
						
							$('#lyrics').scrollTop(lyricST);
							$('.blur').css('filter', 'blur(120px) brightness(70%)')
						}
						})
						//关于歌词变化的函数
						function lyricChang(data){
							
						   let lyricArr = '';
						   data.forEach((index, i) => {
							lyricArr = lyricArr + `<li class="lyrics-li">${index.lyric}</li>` ;
						   });
						    
						$('#lyrics ul').html(lyricArr);
						}
					   //歌曲播放结束
					   function songsEnd(lr){
						start();
						musicBtn = !musicBtn;
						player.pause();		
						$('#bgr-packge').css('animation','none');
						$('#play-point','#play-white').css('transiation','')
						$('#play-point').css('left', 0)
						$('#play-white').css('width',0)
					   //觉决定播放
					   if(lr){
                         if(that + lr >=0 && that + lr < musicDate1.length){
					
							 that = that + parseInt(lr) ;
						
							 musicPlay(musicDate1[that]);
						 }
					   }

					   ///下一首
                       else if(playWay === 1){
						 musicPlay(musicDate1[that]);
						
						}
				
						 ///循环播放
						else if(playWay === 2){
							that++;
						
             				musicPlay(musicDate1[that]);
						}
					   }
					   /////点击事件
					   function getMousePos(event) {
						var e = event || window.event;
						var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
						var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
						var x = e.pageX || e.clientX + scrollX;
						var y = e.pageY || e.clientY + scrollY;
						//alert('x: ' + x + '\ny: ' + y);
						return { 'x': x, 'y': y };
					}
			           //////歌词高亮
                      function lightLyric(data){
						let timex = [
					];
						data.forEach((index, i) => {
						timex.push(index.time.split(''));
						
						});
					
						///回复设置
						clearTimeout(lyricTimer);
						clearInterval(Itimer);
						$('#lyrics').scrollTop(0);
						
						let index = 0;
						$('#lyrics ul li').removeClass('birght-ly');
						$('#lyrics ul li').eq(index).addClass('birght-ly');
						//开启开关
						lyricBtn = true;
						timeOutLyric(index, timex);
				       ///开始计时器
						//记录下思路：
					   /* 
					    将每个时间化为8个的位置的数组，再根据数组来计算出ms，再相减得出ms差
					 */
					  }
					  function timeOutLyric(index, timex){

                          ////关闭项目
                            if(index >= timex.length - 1) return;
							if(!lyricBtn) return;
						   
						lyricTimer = setTimeout(()=>{
							  //点亮
							  $('#lyrics ul li').eq(index).removeClass('birght-ly');
							  $('#lyrics ul li').eq(index+1).addClass('birght-ly');
						
						if(index >= 5){
							let ts = 0;
							clearInterval(Itimer);
							let transHeight = $('#lyrics ul li').eq(index+1).css('height');
						
							
							transHeight =(parseFloat(transHeight) + 43.13)/10;
					
							Itimer = setInterval(()=>{
								   ts++;
								   lyricST = $('#lyrics').scrollTop() + transHeight;
								   $('#lyrics').scrollTop(lyricST);
								if(ts == 10){
									clearInterval(Itimer);
								}
							 },10)
						}
							  index ++;
							  return timeOutLyric(index, timex);
						  },  calTime(timex[index+1]) - calTime(timex[index]))
					  }
					  ///计算时间差函数
					  function calTime(time){
						let timeF = time[0]*600000 +  time[1]*60000 + time[3]*10000 + time[4]*1000 +time[6]*100 + time[7]*10;
						return timeF;
					  }
					  
					  //search
					  let searchBtn = true;
					  $('#search-logo').click(function(){
						if(searchBtn){
							$('	#search-text').css('display', 'block');
							cancel();
						}
						else{
							$('#search-text').css('display', '');
							$('#search-t').val('');
							search();
						}
						searchBtn = !searchBtn;
					  })


	/////////留言部分
						///输入留言
						document.querySelector('#send-comment-text').oninput=function(){
							var promot = $('#send-comment-text').val();
		                    
                           //当输入的字符位0位时
							if( promot.length ==0 ){
								$('#sumbit').css('display', 'none');
							}
							////当输入的字符大于5个字符的时候
							if( promot.length >=5 ){
							////设置text value值
							 $('#sumbit').css('display', 'block');
							}
					
						}
						$('#sumbit').click(()=>{
						checkCookie();
						})

					    commentArea.onscroll = function(){
						
			//	console.log(commentArea.scrollHeight,this.scrollTop,commentArea.clientHeight)
						 if(commentArea.scrollHeight-this.scrollTop <= commentArea.clientHeight + 50){
						
							$.ajax({
								'url':'/comment',
								"method" : 'get',
								'data':{ "act":'load','order':order},
								'success':(data)=>{
								//改变order
								order += data.length;
						
								 //如果没有数据了
						
								if(!data.length){
									
									commentArea.onscroll = '';
									document.querySelector('#loading').style.display = 'none';
								}
								///如果有数据，则将其渲染出来
									for(let i = 0;i < data.length; i++ ){
									
		
										let commmentsElements = document.createElement('div');
										commmentsElements.className = 'comment';
										commmentsElements.innerHTML = `
											<div class="comment-logo">
											   <img src="./img/admin-1.jpg" alt="" >
										   </div>
										   <div class="comment-content">
											   <h1>乐友：${data[i].name.slice(0, 3)}*@qq.com</h1>
											   <p>${data[i].content}</p>
										   </div> `
										   commentArea.insertBefore(commmentsElements, document.querySelector('#loading'))
									}
								}
							})
						 }
						}

   ///cookies

				function checkCookie()
						{
				return new Promise((reslove, reject)=>{
					email=getCookie('email')
					password=getCookie('password')
					if (email!=null && email!="")
					{
                        $.ajax({
							'url':'/login',
							'menthod':'GET',
							'data':{'email':email,'password':password,'act':'login'},
							'success':(data)=>{
                             if(data == true){
						
								addComments();
							 }
							 else{
								$('.prmote').css('display', 'block').html(`错误:请输入正确的邮箱与密码`);
		
								 DelCookie('email');
								 DelCookie('password');
							 }
							}
						})
		            }
					else 
					{				
                        $('#login').css({
						
							'transform':'none',
							'opacity':'1',
						    'z-index':'2',      
						})
///////////////////
					}
				})
   }
	          ////登录
                $('#login-btn').click(function(){
					email= document.querySelector('#email-text').value;
					password= document.querySelector('#password-text').value;
					if(!email || !password ){

						$('.prmote').css('display', 'block').html(`请稍微输入些数据，拜托拜托`);
                
						return;
					}
					$('#login-btn').html(`<span>登录中...</span>`)
                     login();
				})
				////注册
	            $('#registered').click(function(){
		
                	email= document.querySelector('#email-text').value;
					password= document.querySelector('#password-text').value;
					if(!email || !password ||!regex.test(email) ){
						$('.prmote').css('display', 'block').html(`错误:请输入正确的邮箱与密码`);
						return;
					}
					$('#registered').html(`<span>注册中...</span>`)
					$.ajax({
					'url' :	'/login',
					'method' : 'get',
					'data' : {'email':email, 'password':password,'act':'registered'},
					'success' : (data)=>{
	
					 if(data.act === true)
					 login();
					 else{
						///如果失败
						$('.prmote').css('display', 'block').html(`错误:${data.mes}`);
						$('#registered').html(`<span>注册</span>`)
					 }
					}
					})
				})
			     $('#cancel-btn').click(()=>{
					$('#login').css({
						'transform':'perspective(600px) rotateX(40deg)  scale(-1)',
						'opacity':'0',
						'z-index':'-1',
					})
					$('#send-comment-text').val('');
					$('#sumbit').css('display', 'none')
					
				 })
				 
				function addComments(){
	
					let value = $('#send-comment-text').val();
					let commmentsElements = document.createElement('div');
					commmentsElements.className = 'comment';
					commmentsElements.innerHTML = `
						<div class="comment-logo">
						   <img src="./img/admin-1.jpg" alt="" >
					   </div>
					   <div class="comment-content">
						   <h1>乐友：${getCookie('email').slice(0, 3)}*@qq.com</h1>
						   <p>${value}</p>
					   </div>
				`
					   //client添加效果
					   commentArea.insertBefore(commmentsElements, commentArea.childNodes[0])
					   //client发送数据到json的数据库
					   
					   $.ajax({
						   'url':'/comment',
						   "method" : 'get',
						   'data':{ "act":'upload','data':value,'user':getCookie('email')},
						   'success':(data)=>{
					
							   order++;
						   },
						   'error': (err)=>{
					
						   }
					   })							
					   $('#sumbit').css('display', 'none');
					   $('#send-comment-text').val('');

				}

				function login(){
					
					email= document.querySelector('#email-text').value;
					password= document.querySelector('#password-text').value;

					setCookie(email,password,7);
					$('#login').css({
						'transform':'perspective(600px) rotateX(40deg)',
						'opacity':'0',
						'z-index':'-1',
					})
					checkCookie();
					$('#login-btn').html(`<span>登录</span>`)

					$('#registered').html(`<span>注册</span>`)
					$('.prmote').css('display', 'none')
					
				}
			})
               	// src="http://m10.music.126.net/20180824103745/bb12a30b17740f8ddb4759b908a540b2/ymusic/0fd6/4f65/43ed/a8772889f38dfcb91c04da915b301617.mp3"